  
.bar {
    width: 4px;
    height: 45px;
    background-color: transparent;
    display: inline-block;
    transform-origin: botton center;
    animation: loading 1.5s ease-in-out infinite;
    margin-left: 3px;
  }
  @for $i from 1 to 8 {
    .bar:nth-child(#{$i}) {
      animation-delay: (0.3+0.1s * $i);
    }
  }
  .center-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    // transform:translate(-50%,-50%);
  }
  @keyframes loading {
    0% {
      transform: scaleY(0.1);
      background-color: transparent;
    }
    50% {
      transform: scaleY(1);
      background-color: #2ecc71;
    }
    100% {
      transform: scaleY(0.1);
      background-color: transparent;
    }
  }
  html,body {
    &[theme="dark"] {
      .loading-wapper-c {
        background: rgba(0, 0, 0, 0.6) !important;
      }
    }
    .loading-wapper-c {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.6);
      z-index: 999;
      top: 0;
      overflow: hidden;
    }
  }
